<script setup lang="ts">
  import { ref,defineProps,onMounted } from 'vue'
  import { getProductDetailImg } from '@/api'

  //商品详情图片
  const detailImgs = ref([])

  onMounted(()=>{
    getProductDetailImgs()
  })


  const product_id = defineProps({
    message: {
      type: String,
      required:true
    }
  })


  const getProductDetailImgs = ()=>{
    console.log(product_id.message)
    getProductDetailImg(product_id.message+'').then(({data})=>{
      if(data === ''|| data === " "){
        return
      }
      data.forEach(item=>{
        detailImgs.value.push(item.url+'/'+item.name)
      })
    })
  }
</script>

<template>
  <div class="goods-detail">
      <div v-for="(item,index) in detailImgs" :key="index">
        <el-image :src="item" style="min-width:600px;height: auto;" class="goods-detail-img"/>
      </div>
  </div>
</template>

<style scoped>
.goods-detail{
  width: 100%;
}

.goods-detail-img{
  margin-top: 30px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
</style>